<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
</head>
<body onload="draw()">

<div id="container">
    <canvas id="mycanvas" height="150" width="150">Your Browser does not support Canvas, please upgrade</canvas>
</div>

<script>
    // 绘制文本fillText()和文本边框strokeText()
    function draw () {
        var canvas = document.getElementById('mycanvas');
        var ctx = canvas.getContext('2d');
        // 绘制文本
        ctx.font = '30px serif';
        ctx.fillStyle = "red";
        ctx.fillText('hello text', 30, 40);
        // 文本边框
        ctx.font = '20px serif';
        ctx.strokeStyle = "green";
        ctx.strokeText("nihao", 50, 50);
        // 测试文本的宽度，会返回一个对象
        const textObj = ctx.measureText("hahha");
        console.log(textObj.width);
    }
</script>
</body>
</html>